<!--  -->
<template>
    <div class="echart">
        <div class="h50">
        <my-tab-bar
          title="可视化"
          left-arrow
          @click-left="onClickLeft"
        ></my-tab-bar>
      </div>
        <div>折线图</div>
        <div id="mychart" :style="{width:'100%',height:'300px'}"></div>
        <liquidfill echartsId="liquidfill"></liquidfill>
    </div>
</template>

<script>
    // let echarts = require('echarts/lib/echarts');
    import liquidfill from "../../components/echartCom/liquidfills"
    export default {
        // name: 'echartPage',
        data() {
            return {
                // msg: 'welcome to mychart'
            };
        },
        components: {
            liquidfill,
        },
        mounted() {
            this.drawLine();
        },



        methods: {
            onClickLeft() {
                this.$router.back()
            },
            drawLine() {
                let mychart = this.$echarts.init(document.getElementById('mychart'))
                let label = [233, 233, 200, 180, 199, 233, 210, 180];
                let value = [233, 233, 200, 180, 199, 233, 210, 180];

                let option = {
                    backgroundColor: '#101e44',
                    grid: {
                        top: 100,
                        containLabel: true,
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            lineStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(255,255,255,0)', // 0% 处的颜色
                                    }, {
                                        offset: 0.5,
                                        color: 'rgba(255,255,255,1)', // 100% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: 'rgba(255,255,255,0)', // 100% 处的颜色
                                    }, ],
                                    global: false, // 缺省为 false
                                },
                            },
                        },
                    },
                    xAxis: [{
                        type: 'category',
                        boundaryGap: false,
                        axisLabel: {
                            formatter: '{value}',
                            fontSize: 14,
                            margin: 20,
                            textStyle: {
                                color: '#7ec7ff',
                            },
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#243753',
                            },
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#243753',
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        data: label,
                    }, ],
                    yAxis: [{
                        boundaryGap: false,
                        type: 'value',
                        axisLabel: {
                            textStyle: {
                                color: '#7ec7ff',
                            },
                        },
                        nameTextStyle: {
                            color: '#fff',
                            fontSize: 12,
                            lineHeight: 40,
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#243753',
                            },
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#283352',
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                    }, ],
                    series: [{
                        name: '报名',
                        type: 'line',
                        smooth: true,
                        showSymbol: true,
                        symbolSize: 8,
                        zlevel: 3,
                        itemStyle: {
                            color: '#19a3df',
                            borderColor: '#a3c8d8',
                        },
                        lineStyle: {
                            normal: {
                                width: 6,
                                color: '#19a3df',
                            },
                        },
                        areaStyle: {
                            normal: {
                                color: new this.$echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1, [{
                                        offset: 0,
                                        color: 'rgba(88,255,255,0.2)',
                                    }, {
                                        offset: 0.8,
                                        color: 'rgba(88,255,255,0)',
                                    }, ],
                                    false
                                ),
                            },
                        },
                        data: value,
                    }, ],
                };

                mychart.setOption(option, true);
                window.onresize = mychart.resize;

            }
        }
    }
</script>
<style lang='less' scoped>

</style>